<template>
    <div class="common-layout">
        <el-container class="main-container">
            <el-header class="main-header">
                <p>
                    后台管理
                </p>
            </el-header>
            <el-container class="main-body">
                <el-aside width="200px" class="main-aside">
                    <!-- <div class="menu">
                        用户管理
                    </div> -->
                    <div class="menu" @click="goto('articlemanager')">
                        文章管理
                    </div>
                    <div class="menu" @click="goto('noticemanager')">
                        公告管理
                    </div>
                    <div class="menu" @click="goto('taskmanager')">
                        任务管理
                    </div>
                    <!-- <div class="menu">
                        评论管理
                    </div> -->
                    <div class="menu" @click="goto('publishnotice')">
                        发布公告
                    </div>
                    <div class="menu" @click="goto('administratorlogin')">
                        退出
                    </div>
                </el-aside>
                <el-main class="main-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import router from '../router'

const goto = (path) => {
    router.push({name: path})
}

</script>

<style  lang="less">
// .main-container {
//     height: 100%;
//     width: 100vh;
//     background-color: aquamarine;
// }

.common-layout {

    height: 100vh;
    width: 100vw;

    .main-container {
        height: 100%;
        width: 100%;


        .main-header {
            background-color: #409eff;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 62px;
            font-size: 20px;
            height: 60px;
        }

        .main-body {
            height: 100%;
            .main-aside {
                background-color: #40a0ff80;
                height: 100%;
                .menu{
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    
                    &:hover{
                        background-color: #40a0ff80;
                        cursor: pointer;
                    }
                }
            }

            .main-main {
                background-color: rgba(0, 0, 0, 0.114);
                height: 100%;
                width: 100%;
                padding: 0;
                margin: 0%;
                overflow: hidden;
            }
        }
    }
}</style>